import './index.less'

/**
 * @typedef {Object} APanelProps
 * @property {React.ReactNode} [title] 标题
 * @property {React.ReactNode} [extra] 右侧
 * @property {string} [className]
 * @property {React.CSSProperties} [style]
 */

/**
 *
 * @param {APanelProps} props
 * @returns
 */
const APanel = props => {
  const { title, extra, children, className, style } = props
  return (
    <div className={`APanel ${className}`} style={style}>
      <div className='APanel-titleWrap'>
        <div className='APanel-title'>{title}</div>
        {extra && <div className='APanel-extra'>{extra}</div>}
      </div>
      <div className='APanel-content'>{children}</div>
    </div>
  )
}

export default APanel
